<template>
  <div>
    <el-dialog
      width="70%"
      title="热销详情"
      :visible.sync="dialogVisable"
      @close="closeDialog"
    >
      <el-card shadow="never">
        <div slot="header">
          <span>条件查询</span>
        </div>
        <el-form :model="searchForm" size="mini">
          <el-row :gutter="20">
            <el-col :span="4" :offset="0">
              <el-form-item>
                <el-input v-model="searchForm.name" placeholder="商品名称/模糊查询" />
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0">
              <el-form-item>
                <el-input v-model="searchForm.productSn" placeholder="商品货号" />
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0">
              <el-form-item>
                <el-select v-model="searchForm.brandId" placeholder="品牌" clearable filterable>
                  <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0">
              <el-form-item>
                <!-- publishStatus (integer, optional): 上架状态，0->下架；1->上架 , -->
                <el-select v-model="searchForm.publishStatus" placeholder="上架状态" clearable filterable>
                  <el-option
                    label="未上架"
                    :value="0"
                  />
                  <el-option
                    label="上架"
                    :value="1"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="4" :offset="0">
              <el-form-item size="mini">
                <!-- verifyStatus (integer, optional): 审核状态：0->未审核；1->审核通过 -->
                <el-select v-model="searchForm.verifyStatus" placeholder="审核状态" clearable filterable>
                  <el-option
                    label="审核"
                    :value="1"
                  />
                  <el-option
                    label="未审核"
                    :value="0"
                  />
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span="4" :offset="0" :push="0">
              <el-form-item>
                <el-button @click="resetForm">重置</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <el-card style="margin-top:40px;height:500px;overflow:auto;" shadow="never">
        <div slot="header">
          <span>商品列表</span>
        </div>
        <el-radio-group v-model="radio">

          <el-table :data="productLsit" border stripe>
            <el-table-column
              label="#"
              width="50"
              type="index"
              align="center"
            />
            <el-table-column
              label="选择"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-radio :label="scope.row.id" @click.native="openInnerDialog(scope.row.id)"><span /> </el-radio>
              </template>
            </el-table-column>

            <el-table-column
              label="商品图片"
              width="120"
              align="center"
            >
              <template slot-scope="scope">
                <img width="100" height="100" :src="scope.row.pic">
              </template>
            </el-table-column>

            <el-table-column
              label="商品名称"
              width="300"
              align="center"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.name }}</div>
                <div style="margin:15px 0;">品牌:{{ scope.row.brandName }}</div>
                <div>{{ scope.row.description }}</div>
              </template>
            </el-table-column>

            <el-table-column
              label="商品价格"
              width="190"
              align="center"
            >
              <template slot-scope="scope">
                <div>原价:{{ scope.row.price }}</div>
                <div style="margin:15px 0;">现价:{{ scope.row.originalPrice?scope.row.originalPrice:scope.row.price }}</div>
              </template>
            </el-table-column>

            <el-table-column
              label="创意"
              width="130"
              align="center"
              prop="productCategoryName"
            />

            <el-table-column
              label="重量"
              width="80"
              align="center"
              prop="weight"
            />

          </el-table>
        </el-radio-group>
        <el-pagination
          style="margin-top:20px;"
          :current-page="pagination.start"
          :page-sizes="pagination.sizes"
          :page-size="pagination.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>

      <el-button size="small" @click="dialogVisable = false">取消</el-button>
    </el-dialog>
    <el-dialog
      title="编辑限时活动"
      :visible.sync="innerVisible"
      width="50%"
      @close="closeInnerDialog"
    >
      <div style="height:300px;">
        <el-form ref="form" :model="innerForm" label-width="100px" size="mini">
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="商品原价">
                <span>{{ innerForm.originalPrice }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="商品名称">
                <span>{{ innerForm.name }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="促销价格">
                <el-input-number v-model="innerForm.promotionPrice" style="width:80%;" size="mini" :controls="true" controls-position="both" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="排序">
                <el-input-number v-model="innerForm.sort" style="width:80%;" size="mini" :controls="true" controls-position="both" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="开始时间">
                <el-date-picker
                  v-model="innerForm.promotionStartTime "
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width:75%;"
                  type="datetime"
                  placeholder="开始时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="结束时间">
                <el-date-picker
                  v-model="innerForm.promotionEndTime "
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width:75%;"
                  type="datetime"
                  placeholder="结束时间"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="活动限购数量">
                <el-input v-model="innerForm.promotionPerLimit" style="width:60%;" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="商品图片">
                <img width="150" height="150" :src="innerForm.pic " alt="">
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>
      <span slot="footer">
        <el-button @click=" innerVisible= false">取消</el-button>
        <el-button type="primary" @click="saveActivity">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import mix from '@/mixin'
import {
  productsByPage as productsByPageApi,
  findAllBrand as findAllBrandApi
} from '@/api/product/list'
import {
  updateRecommend as updateRecommendApi,
  addRecommend as addRecommendApi
} from '@/api/shop/activity'
export default {
  name: 'ActivityDialog',
  mixins: [mix],
  data() {
    return {
      dialogVisable: false,
      productLsit: [], // 商品列表
      searchForm: {}, // 表单搜索数据
      loading: true, // 表格加载动画
      brandList: [], // 品牌liibao
      radio: 0,
      innerVisible: false,
      innerForm: {},
      ifModify: false
    }
  },
  created() {
    this.getProductLsit()
    this.getBrandList()
  },
  methods: {
    openInnerDialog(id) {
      this.innerVisible = true
      this.radio = id
      var form = this.productLsit.find(ele => ele.id === id)
      this.innerForm = Object.assign({}, form)
    },
    // 保存活动
    saveActivity() {
      this.$confirm('是否确认新增最热推荐商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var api = null
        if (this.innerForm.promotionType === 0) { // 新增限时活动
          api = addRecommendApi
        } else { // 修改限时活动
          api = updateRecommendApi
        }
        this.innerForm.productId = this.innerForm.id

        api(this.innerForm)
          .then(res => {
            const { message, success } = res
            if (success) {
              this.ifModify = true
              if (this.innerForm.promotionType === 0) {
                this.$message.success('新增限时活动成功!')
              } else {
                this.$message.success('修改限时活动成功!')
              }
              this.pagination.start = 1
              this.pagination.limit = 10
              this.innerVisible = false
              this.closeDialog()
              this.$emit('useGetActivityList')
            } else {
              this.$message.error(message)
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作!'
        })
      })
    },
    // 关闭内层弹框
    closeInnerDialog() {
      this.innerVisible = false
      this.innerForm = {}
    },
    // 打开弹框
    openModal() {
      this.dialogVisable = true
      this.ifModify = false
    },
    // 关闭弹框
    closeDialog() {
      this.dialogVisable = false
      this.pagination.start = 1
      this.productLsit.limit = 10
    },
    // 重置搜索表单
    resetForm() {
      this.searchForm = {}
      this.start = 1
      this.getProductLsit()
    },
    // 根据搜索获取列表
    search() {
      this.pagination.start = 1
      this.getProductLsit()
    },
    // 更改当前页数
    handleCurrentChange(e) {
      this.pagination.start = e
      this.getProductLsit()
    },
    // 更改limit，一页多少数据
    handleSizeChange(e) {
      this.pagination.limit = e
      this.pagination.start = 1
      this.getProductLsit()
    },
    // 获取品牌列表
    getBrandList() {
      findAllBrandApi()
        .then(res => {
          // console.log('品牌列表==>', res)
          const { message, data, success } = res
          if (success) {
            this.brandList = data.items
          } else {
            this.$message.error(message)
          }
        })
    },
    // 获取商品列表
    getProductLsit() {
      this.filterNullParamsObject(this.searchForm)
      var data = null
      this.loading = true
      if (this.passForm) {
        data = [this.pagination.start, this.pagination.limit, this.searchForm]
      } else {
        data = [this.pagination.start, this.pagination.limit]
      }
      productsByPageApi(...data)
        .then(res => {
          const { message, data, success } = res
          if (success) {
            this.productLsit = data.rows
            this.pagination.total = data.total
          } else {
            this.$message.error(message)
          }
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep label{
    font-weight: 700;
}
</style>
